<template>
  <button :class="btnSize + ' ' + type + ' ' + plainClass" :disabled="disabled">
    <slot name="icon"></slot>
    <slot></slot>
    <slot name="loading"></slot>
    {{ btnSize }}
  </button>
</template>
<script setup>
import { defineProps, computed, defineExpose } from "vue";
const props = defineProps({
  size: {
    type: String,
    default: "default",
  },
  type: {
    type: String,
    default: "primary",
  },
  plain: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const btnSize = computed(() => {
  return "font" + props.size;
});
const plainClass = computed(() => {
  return "plain" + props.plain;
});

defineExpose({
  size: props.size,
  type: props.type,
  disabled: props.plain,
});
</script>
<style scoped>
.fontlarge {
  font-size: 20px;
}
.fontdefault {
  font-size: 16px;
}
.fontsmall {
  font-size: 12px;
}
button {
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
}
.primary {
  border: 1px solid #409eff;
  background-color: #409eff;
  color: #fff;
}
.success {
  color: #fff;
  border: 1px solid #67c23a;
  background-color: #67c23a;
}
.warning {
  color: #fff;
  border: 1px solid #e6a23c;
  background-color: #e6a23c;
}
.danger {
  color: #fff;
  border: 1px solid #f56c6c;
  background-color: #f56c6c;
}
.info {
  color: #fff;
  border: 1px solid #909399;
  background-color: #909399;
}
.text {
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
}
.plaintrue {
  background: none;
  color: #000;
}
</style>
